import React, { useState, useEffect, Fragment } from 'react';
import './App.scss';
import logo from './Rocket (1).svg'
import { WOW } from 'wowjs'
import "wowjs/css/libs/animate.css";
import bezier from './bezier';
function App() {
  let [w_width, setWWidth] = useState(window.innerWidth)  //设置幕布宽度
  let [h_height, setHeight] = useState(500)  //设置幕布高度
  let [begin_n, setBeginN] = useState([0, 164])  //开始坐标
  let [end_n, setEndN] = useState([w_width, 40]) //结束坐标
  let [one_n, setOneN] = useState([100, 40]) //bezier坐标1
  let [two_n, setTwoN] = useState([750, 788]) //bezier坐标2
  let [three_n, setThreeN] = useState([800, -30]) //bezier坐标3
  let [one_dot_n, setOneDotN] = useState(70) //生成背景虚线坐标的数量
  let [two_dot_n, setTwoDotN] = useState(1) //生成上层圆的数量
  let [oneXY, setOneXY] = useState() //背景虚线坐标数组
  let [twoXY, setTwoXY] = useState() //上层圆坐标数组
  let [bezier_n, setBezierN] = useState(3) //bezier阶数
  let [process, setProcess] = useState(0) //进度


  useEffect(() => {
    window.addEventListener('resize', () => {
      // 只要窗口大小发生像素变化就会触发
      setWWidth(window.innerWidth)
    })
    return () => {
      window.removeEventListener('resize', () => { })
    }
  }, [])

  //根据当前屏幕宽度计算各个贝塞尔点坐标
  useEffect(() => {
    console.log('当前屏幕宽', w_width)
    setBeginN([100, 400])
    setEndN([340, 90])
    setOneN([700, 460])
    setTwoN([700, 120])
    setThreeN([(1350 / 1920) * w_width, (-40 / 446) * h_height])
  }, [w_width, h_height])

  useEffect(() => {
   
    // console.log('当前坐标组为:', [begin_n, one_n, two_n, three_n, end_n])
    let anchorpoints

    switch (bezier_n) {
      case 1:
        anchorpoints = [begin_n, end_n]
        break;
      case 2:
        anchorpoints = [begin_n, one_n, end_n]
        break;
      case 3:
        anchorpoints = [begin_n, one_n, two_n, end_n]
        break;
      default:
        anchorpoints = [begin_n, one_n, two_n, three_n, end_n]
        break;
    }

    let oneXY = bezier.CreateBezierPoints(
      anchorpoints,
      one_dot_n
    )

    // Math.arctan()
    //计算背景虚线的斜率
    oneXY.forEach((value, key) => {
      if (oneXY[key + 1]) {
        let nextX = oneXY[key + 1][0]
        let nextY = oneXY[key + 1][1]
        let thisX = value[0]
        let thisY = value[1]
        const gamma = Math.atan((nextY - thisY) / (nextX - thisX)) * 180 / Math.PI + ((nextX < thisX) ? -180 : 0)
        oneXY[key] = [...value, gamma]
      }
      else {
        oneXY[key] = [...value, -180];
      }
    })
    setOneXY(oneXY)
  }, [begin_n, one_n, two_n, three_n, end_n, one_dot_n, two_dot_n, bezier_n])

  useEffect(() => {
    if (oneXY && process < oneXY.length - 1 && process > 0) {
      setTimeout(() => {
        setProcess(Math.min(oneXY.length - 1, process + 4))
      }, 100)
    }
  }, [process, oneXY])



  const onStart = () => {
    setProcess(1)
  }
  const currentPos = oneXY ? oneXY[process] : null;
  return (
    <div className="App">
      <div className="inputNum">
        <button onClick={onStart}>Start</button>

      </div>
      <div className="main-container" style={{
        width: `${w_width}px`,
        height: `${h_height}px`
      }}>
        <Fragment>
          {
            oneXY ? oneXY.slice(0, process).map((v, k) => {
              return (
                <span
                  key={`${k}one`}
                  className={`dot${k}`}              
                  style={{
                    left: `${v[0]}px`,
                    top: `${v[1]}px`,
                    transform: `rotate(${v[2]}deg)`,
                  }}>
                </span>
              )
            }) : ''
          }
        </Fragment>

        <Fragment>
          {
            currentPos && (
              <div
                className={`domain-infos${0}`}
                style={{
                  left: `${currentPos[0]}px`,
                  top: `${currentPos[1]}px`,
                  transform: ` translate(-50%, -50%)`,
                }}
              >
                <div
                  className="domain-img_o" style={{ transform: `rotate(${currentPos[2]}deg)` }}>
                  <img className="domain-img_item" src={logo} alt="" />
                </div>
              </div>)
          }
        </Fragment>
      </div>
    </div>
  );
}

export default App;
